<template>
  <el-card class="search-card" shadow="hover" :body-style="{ padding: 0 }">
    <div class="search-row" v-for="(it, i) in rows" :key="i">
      <div class="search-row-title">
        <span>{{ it.name }}</span>
      </div>
      <div class="search-row-values">
        <span
          v-for="(jt, j) in it.children"
          :key="i + '_' + j"
          @click="goList(it, jt)"
          :class="paramsListSub.indexOf(jt.id + '') != -1 ? ' active' : 'none'"
        >
          {{ jt.name }}
        </span>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, defineProps } from "vue";
import { useRoute, useRouter } from "vue-router";
import { gotoList } from "@/utils/action";
// import { I } from "../../dist/assets/vendor.2a897131";

const params = ref(useRoute().params);
const paramsList = params.value.param.split("_");
const paramsListSub = ref([paramsList[1], paramsList[2], paramsList[3]]);
const router = useRouter();
const goList = (it, jt) => {
  const param = paramsList.map((it, index) => {
    if (index === 4) return 1;
    return it;
  });
  if (it.template === 2) param[3] = 0;
  if (it.template === 1) {
    param[2] = 0;
    param[2] = 0;
  }
  param[it.template] = jt.id;
  gotoList(param.join("_"), router, false);
};

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});
const rows = ref([
  {
    name: "热门软件分类",
    children: props.data.secondTypeVos,
    template: 1,
  },
  {
    name: "按软件类别找",
    children: props.data.thirdTypeVos,
    template: 2,
  },
  {
    name: "更多筛选条件",
    children: props.data.labels,
    template: 3,
  },
]);
</script>

<style lang="less" scoped>
.search-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  padding: 10px 20px;

  .search-row {
    display: flex;
    margin: 0px 0 10px 0;
    border-top: 1px solid #eee;
    &:first-child {
      border: 0;
    }
    // align-items: center;

    .search-row-title {
      display: flex;
      align-items: flex-start;
      font-size: 14px;
      font-weight: 400;
      color: #93999e;
      line-height: 14px;
      width: 100px;
      margin: 10px 20px 10px 0px;
      span::after {
        content: ":";
      }
    }
  }

  .search-row-values {
    display: flex;
    // align-items: center;
    flex-flow: row;
    flex-wrap: wrap;
    max-width: calc(100% - 120px);
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1d2127;
    line-height: 14px;

    span {
      margin-top: 10px;
      margin-right: 10px;
      line-height: 20px;
      padding: 0 5px;
      cursor: pointer;
    }

    .active {
      background: @theme-back-color;
      color: @theme-color;
      border-radius: 10%;
    }

    span:hover {
      color: @link-color;
    }
  }
}
</style>
